<div id="buy" class="tab-pane buy-tab-pane">
    <div class="row mrgud">
        <div class="col-sm-12">
            <!--导航部分-->
            <div class="text-center">
                <ul class="nav nav-icons" id="buyType" role="tablist">
                    @foreach($goodsTypes as $goodsType)
                        <li class="
                                @if($goodsType['code']==$typeCode)
                                active
                                @endif
                                ">
                            <a href="#prize_tab_0" role="{{$goodsType['code']}}" data-toggle="tab"
                               aria-expanded="true">
                                {{$goodsType['name']}}
                            </a>
                        </li>
                    @endforeach
                </ul>
            </div>
            <!--购买奖品表格部分-->
            <div class="tab-content">
                <div class="tab-pane active" id="activity_tab_0">
                    <div class="card">
                        <div class="content">
                            <table id="bootstrap-table-container" class="table">
                                <thead>
                                <th data-field="state" data-checkbox="true"></th>
                                <th data-field="prize_image">奖品图片</th>
                                <th data-field="prize_name">奖品名称</th>
                                <th data-field="prize_category">奖品类型</th>
                                <th data-field="prize_number" data-sortable="true">库存</th>
                                <th data-field="prize_money" data-sortable="true">价格(元)</th>
                                <th data-field="prize_endtime" data-sortable="true">过期时间</th>
                                <th data-field="actions" class="td-actions text-center" data-events="operateEvents"
                                    data-formatter="">操作
                                </th>
                                </thead>
                                <tbody>
                                @forelse($goodsInfos as $goodsInfo)
                                    <tr>
                                        <td>{{$goodsInfo['id']}}</td>
                                        <td><img src="{{$goodsInfo['image']}}"></td>
                                        <td>{{$goodsInfo['name']}}</td>
                                        <td>{{$goodsInfo['goods_type']['name']}}</td>
                                        <td>{{$goodsInfo['stock']}}</td>
                                        <td>{{$goodsInfo['price']}}</td>
                                        <td>{{$goodsInfo['expired_date']}}</td>
                                        <td>
                                            <button class="btn btn-info btn-fill btn-block operate_buyprize"
                                                    data-toggle="modal"
                                                    data-target="#buyprizeModal">购买
                                            </button>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="8">暂时没有数据</td>
                                    </tr>
                                @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <!--摸态框-->
            <div class="modal fade" id="wizardForm" tabindex="-1" role="dialog" aria-labelledby="buyprizeModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="buyprizeModalLabel">购买奖品</h4>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">购买数量</label>
                                    <div class="col-sm-7 ">
                                        <input class="form-control ptr modal-buy-prizenumber" type="number"
                                               name="modal-buy-prizenumber" placeholder="请输入购买数量"/>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">商品单价：</label>
                                    <span class="col-sm-7 modal-unit-price"></span>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">合计价格：</label>
                                    <span class="col-sm-7 modal-count-price"></span>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-primary">支付</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
	$(document).ready(function () {
		$(document).on('click', '#buyType a', function () {
			var type_code = $(this).attr('role');

			$.get('/web/prize/buy?type_code=' + type_code, function (res) {
				$('.tab-content').html(res);
				$('.tab-pane').show();
			});
		});

		$('.fileInput').each(function () {
			initFileInput($(this));
		});

		initValidform($('#wizardForm'));

		window.operateEvents = {
			'click .operate_buyprize': function (e, value, row) {
				var utilprice = row.prize_money;
				$('.modal-count-price').empty();
				$('.modal-buy-prizenumber').val('');
				$('.modal-unit-price').empty();
				$('.modal-unit-price').html(utilprice + "元");
				$('.modal-buy-prizenumber').on('input', function () {
					var number = $(this).val();
					var sum = number * utilprice;
					$('.modal-count-price').empty();
					$('.modal-count-price').html(sum + "元");
				})
			}
		};
		function operateFormatter(value, row, index) {
			var dropdown_id = 'dropdown_' + new Date().getTime();
			var actions = [];
			actions.push([
				'<a rel="tooltip" title="购买" class="btn btn-simple btn-warning btn-icon table-action operate_buyprize" data-toggle="modal" data-target="#buyprizeModal" href="javascript:void(0)">',
				'购买',
				'</a>'
			].join(''));
			return actions.join('');
		}

		$('#bootstrap-table-container').on('post-body.bs.table', function () {
			$('[rel="tooltip"]').tooltip();
		});
	});
</script>
